<template>
	<view class="my">
		<view class="weather">
			<text>{{tianqi.rili}}</text>
			<text>{{tianqi.week}}</text>
			<text>{{tianqi.nongli}}</text>
			<text>{{tianqi.weather}}</text>
			<text>{{tianqi.tempera}}°C</text>
		</view>
		<view class="userinfo">
			<view>
				<view>
					<!-- #ifdef APP-PLUS -->
					<image mode="aspectFill" class="avatar" :src="myinfos.data && myinfos.data.avatar"></image>
					<!-- #endif -->
					<!-- #ifdef H5 || MP-WEIXIN -->
					<open-data type="userAvatarUrl" class="avatar"></open-data>
					<!-- #endif -->
				</view>
				<view>
					<view>
						<!-- #ifdef APP-PLUS -->
						<text class="name">{{nicheng}}</text>
						<!-- #endif -->

						<!-- #ifdef H5 || MP-WEIXIN -->
						<text class="name" v-if="vuex_myinfo.nickname">{{vuex_myinfo.nickname}}</text>
						<!-- #endif -->

						<text class="name" v-if="vuex_myinfo.nickname"></text>
						<open-data v-else type="userNickName" class="name"></open-data>
						<text class="mobile">{{vuex_myinfo.mobile | handelmobile}}</text>
						<image v-if="vuex_httpImageUrl" @click="C_edit" class="edit"
							:src="vuex_httpImageUrl+'static/my/edit.png'"></image>
					</view>
					<view>

						<!-- 超级vip -->
						{{vuex_myinfo.level == 0?'普通用户':'会员'}}<text
							style="margin-left: 20rpx;color: #808080;">生日:{{vuex_myinfo.nlbirthday}}</text>
					</view>
				</view>
			</view>
			<image v-if="vuex_httpImageUrl" @click="showCode" class="code"
				:src="vuex_httpImageUrl+'static/my/ReferralCode.png'" mode="widthFix"></image>
		</view>

		<view class="coupon">
			<view>
				<view class="name">送您20元优惠劵</view>
				<view class="msg">开通会员查看健康报告和赚佣金</view>
			</view>
			<view class="btn" @click="C_OpenMember" v-if="isShenghe">立即开通</view>
		</view>

		<view class="list">
			<view v-for="(item,index) of list.one" :key='index' @click="C_listItem(item.pageUrl)">
				<image v-if="vuex_httpImageUrl" :src="vuex_httpImageUrl+'static/my/list/'+(item.num)+'.png'"
					mode="widthFix"></image>
				<view>
					<text>{{item.name}}</text>
					<text class="edition">{{item.edition}}</text>
				</view>
			</view>
			<view @click="C_listItem('/pages/my/gly/gly')" v-if="vuex_myinfo.level">
				<image :src="vuex_httpImageUrl && vuex_httpImageUrl+'static/my/list/11.png'"></image>
				<view>
					<text>我的健康管理员</text>
				</view>
			</view>
			<view @click="C_listItem('/pages/my/address/address')">
				<image :src="vuex_httpImageUrl && vuex_httpImageUrl+'static/my/list/address.png'"></image>
				<view>
					<text>收获地址</text>
				</view>
			</view>
		</view>
		<view class="list">
			<view v-for="(item,index) of list.two" :key='index' @click="C_listItem(item.pageUrl)">
				<image v-if="vuex_httpImageUrl" :src="vuex_httpImageUrl+'static/my/list/'+(item.num)+'.png'"
					mode="widthFix"></image>
				<view>
					<text>{{item.name}}</text>
					<text class="edition">{{item.edition}}</text>
				</view>
			</view>
		</view>

		<uni-popup ref="popup" type="center">
			<view class="model">
				<view>
					<view class="title">
						<text class="name" v-if="vuex_myinfo.nickname">{{vuex_myinfo.nickname}}</text>
						<open-data v-else type="userNickName" class="name"></open-data>
						<open-data type="userAvatarUrl" class="avatar"></open-data>
					</view>

					<view class="content">
						<image class="code" :src="code" mode="widthFix"></image>
						<view>扫一扫上方二维码，加入我的团队</view>
					</view>

					<view class="save" @click="saveImg">下载图片到本地</view>
					<image v-if="vuex_httpImageUrl" @click="hideCode" class="close"
						:src="vuex_httpImageUrl+'static/common/x.png'" mode="widthFix"></image>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	// import {getLunarDate,getLunarDateString} from './changes.js'
	// console.log({getLunarDate,getLunarDateString});

	import getLunarDate from './calendar.js'
	console.log(getLunarDate, 'getLunarDate');
	console.log(getLunarDate.solar2lunar(2022, 4, 27));
	export default {

		data() {
			return {
				list: {
					one: [{
							pageUrl: '/pages/my/analysis/analysis',
							num: '1',
							name: '分析结果'
						},
						{
							pageUrl: '/pages/my/order/order',
							num: '2',
							name: '我的订单'
						},
						{
							pageUrl: '/pages/my/ZLD/ZLD',
							num: '3',
							name: '我的诊检数据'
						},
						{
							pageUrl: '/pages/my/physical/physical',
							num: '4',
							name: '体检预约'
						},
						{
							pageUrl: '/pages/my/report/report',
							num: '5',
							name: '服药报告'
						},
						{
							pageUrl: '/pages/my/Pharmacy/Pharmacy',
							num: '6',
							name: '我的药方'
						},
						{
							pageUrl: '/pages/my/dakajilu/dakajilu',
							num: '12',
							name: '打卡记录'
						},
						// {pageUrl: '/pages/my/gly/gly',num: '11',name: '我的健康管理员'},
					],
					two: [{
							pageUrl: '/pages/my/extension/extension',
							num: '7',
							name: '我的推广'
						},
						// {pageUrl:' ',num:'8',name:'手环数据'},
						// {pageUrl: ' ',num: '9',name: '版本信息',edition: '123'},
						{
							pageUrl: 'exit',
							num: '10',
							name: '退出登陆'
						},
					]
				},
				tianqi: {},
				code: '',
				isShenghe: false,
				myinfos: {},
				nicheng: '昵称'
			};
		},
		filters: {
			handelmobile: mobile => `${mobile.substr(0,3)} *** ${mobile.substr(7,11)}`
		},
		onLoad() {
			// console.log(calenarFormatter,'yinli');
		},
		onReady() {
			// this.$refs.popup.open()

		},
		async onShow() {
			let myinfo = await this.$u.api.myinfo()
			this.myinfos = myinfo
			this.nicheng = myinfo.data.name
			console.log(myinfo, '个人信息');
			//个人信息
			this.$u.vuex('vuex_myinfo', myinfo.data)

			uni.getLocation({
				success: async res => {
					let {
						latitude: lat,
						longitude: lng
					} = res;
					let params = {
						lat,
						lng
					};
					let weatherdb = await this.$u.api.weather(params);
					let {
						nongli,
						rili,
						weather,
						week,
						tempera
					} = weatherdb.data;
					this.tianqi = {
						nongli,
						rili,
						weather,
						week,
						tempera
					};
					this.$u.vuex("vuex_tianqi", this.tianqi)
				}
			})

			this.$u.post('index/tx_set').then(res => {
				this.isShenghe = res.data.txstatus
			})

		},
		methods: {

			//显示推荐码
			showCode() {
				this.$u.post('/appuser/appQrcode').then(res => {
					this.code = res.data.qrcodeimage
					this.$refs.popup.open()
				})
			},
			// 隐藏推荐码
			hideCode() {
				this.$refs.popup.close()
			},
			saveImg() {
				console.log(123);
				uni.downloadFile({
					url: this.vuex_myinfo.qrcodeimage,
					success: res => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: res => {
								this.$u.toast('保存成功')
							},
							fail: err => {
								console.log(err, 'err');
								if (err.errMsg == "saveImageToPhotosAlbum:fail auth deny") {
									uni.showModal({
										content: '需要打开添加到相册功能后方可使用',
										success: res => {
											if (res.confirm) {
												uni.openSetting({
													success: res => {
														console.log(res,
															'opensetting'
														);
													}
												})
											}
										}
									})
								}
							}
						})
					},
				})
			},
			C_edit() {
				uni.navigateTo({
					url: './edit/edit'
				})
			},
			C_listItem(url) {
				console.log(url, 'url');
				if (url == 'exit') {
					uni.showModal({
						title: '确定退出该账号吗?',
						success: res => {
							console.log(res);
							if (res.confirm) {
								uni.reLaunch({
									url: '/pages/login/loginPassword/loginPassword'
								});
								this.$u.vuex('vuex_myinfo', '');
								this.$u.vuex('vuex_token', '');
							}
						}
					})
					return
				}
				uni.navigateTo({
					url
				})
			},
			C_OpenMember() {
				uni.navigateTo({
					url: './openMember/openMember'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 95%;
		margin: auto;

		.weather {
			margin: 20rpx 0;
			font-size: 24rpx;

			text {
				margin-right: 10rpx;
			}
		}

		.userinfo {
			background-image: url($http-image-url+'static/my/userinfobg.png');
			background-repeat: no-repeat;
			background-size: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 50rpx;
			font-size: 24rpx;

			>view {
				display: flex;
				justify-content: space-between;

				>view {
					&:first-child {
						text-align: center;
						margin-right: 30rpx;
					}

					&:last-child {
						.name {
							font-size: 35rpx;
							font-weight: bold;
						}

						.mobile {
							margin: 0 20rpx;
						}
					}
				}
			}

			.avatar {
				width: 100rpx;
				height: 100rpx;
				display: inline-block;
				border-radius: 50%;
				overflow: hidden;
			}

			.edit {
				width: 30rpx;
				height: 30rpx;
			}

			.code {
				width: 80rpx;
				height: 80rpx;
			}
		}

		.coupon {
			width: 98%;
			margin: auto;
			background: linear-gradient(to right, #F9BF8B, #FFDDBF);
			padding: 30rpx 50rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;

			.name {
				font-size: 35rpx;
				color: rgba(0, 0, 0, .7);
			}

			.msg {
				margin-top: 20rpx;
				color: rgba(0, 0, 0, .5);
			}

			.btn {
				background-color: #131313;
				padding: 20rpx;
				border-radius: 10rpx;
				color: #FFDDBF;
			}
		}

		.list {
			width: 98%;
			border-radius: 20rpx;
			margin: 20rpx auto;
			font-weight: bold;
			overflow: hidden;
			padding: 20rpx 0;
			background-color: #FFFFFF;

			>view {
				display: flex;
				align-items: center;
				padding: 15rpx 30rpx;
				position: relative;

				image {
					width: 60rpx;
					height: 60rpx;
					margin-right: 30rpx;
					border-radius: 50%;
				}

				&::after {
					content: '';
					display: block;
					width: 15rpx;
					height: 15rpx;
					transform: rotate(45deg);
					position: absolute;
					border-top: 2px solid #D8D8D8;
					border-right: 2px solid #D8D8D8;
					top: calc(50% - 10rpx);
					right: 40rpx;
				}

				>view {
					flex: .93;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.edition {
						color: #BBBBBB;
					}
				}
			}
		}

		.model {
			text-align: center;
			border-radius: 20rpx;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: center;


			>view {
				width: 70%;
				background-color: #FFFFFF;
				border-radius: 20rpx;
				position: relative;

				.close {
					width: 60rpx;
					height: 60rpx;
					position: absolute;
					bottom: -100rpx;
					left: calc(50% - 30rpx);
				}

				.title {
					padding-top: 70rpx;
					padding-bottom: 30rpx;
					font-size: 35rpx;
					background: linear-gradient(#268BE6, #2261E2);
					color: #FFFFFF;
					font-weight: bold;
					border-top-left-radius: 20rpx;
					border-top-right-radius: 20rpx;
					position: relative;

					.avatar {
						width: 140rpx;
						height: 140rpx;
						background-color: #FFFFFF;
						border-radius: 50%;
						position: absolute;
						top: -110rpx;
						left: calc(50% - 75rpx);
						border: 10rpx solid #2587E5;
						border-bottom: 0;
						overflow: hidden;
					}
				}

				.content {
					font-size: 24rpx;
					color: #575757;
					width: 80%;
					margin: auto;
					padding-bottom: 30rpx;
					border-bottom: 1px solid rgba(0, 0, 0, .08);

					.code {
						width: 250rpx;
						height: 250rpx;
						margin: 30rpx 0;
					}
				}

				.save {
					// font-weight: bold;
					color: #297CD4;
					margin: 40rpx 0;
				}
			}
		}
	}
</style>
